<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html>
  <head>
    <title>登录</title>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<style type="text/css">
		body {background-color:#15296e;margin:0px;}
		.BOX {background:url(/images/login_bg.jpg) no-repeat;
			  background-size:100%;
			  position:absolute;width:100%;height:100%;}
		.loginBox {width:300px;margin:0 auto;
				   background-color:rgba(255,255,255,0.9);
				   padding:10px 20px;border-radius:4px;}
		.loginBox .title {color:#f26828;font-size:16px;}
		.loginBox .title span {color:#ffd8ac;font-size:10px;
							   margin-left:10px;}
		.loginBox .logo {text-align:center;margin-top:20px;}
		.loginBox .logo img {max-width:230px;}
		.formBox {}
		.formBox .item {margin-top:14px;}
		.formBox .item .inp {width:268px;outline:none;
							 padding:10px 15px;border:1px solid #bcc9d2;
							 border-radius:3px;font-size:16px;}
		.formBox .item .chk {width:16px;cursor:pointer;vertical-align:middle;}
		.formBox .item .jzmm {text-decoration:none;color:#444;font-size:14px;}
		.formBox .item .btn {width:300px;background-color:#f26828;
							 border:1px solid #ee6627;color:#fff;
							 margin-bottom:10px;}
		::-webkit-scrollbar {width:0px;} /* 这是针对缺省样式 (必须的) */
		::-webkit-scrollbar-track {background-color:#ebebeb;} /* 滚动条的滑轨背景颜色 */
		::-webkit-scrollbar-thumb {background-color:#ccc;} /* 滑块颜色 */
		::-webkit-scrollbar-button {background-color:transparent;} /* 滑轨两头的监听按钮颜色 */
		::-webkit-scrollbar-corner {background-color:black;} /* 横向滚动条和纵向滚动条相交处尖角的颜色 */
	</style>
	
  </head>
  	
  <body onresize="resize();">
    
    <div class="BOX" id="BOX">
    
    	<div class="loginBox" id="loginBox">
    		<div class="title">用户登录<span>UserLogin</span></div>
    		<div class="logo">
    			<img src="/images/logo.png">
    		</div>
    		<div class="formBox">
    			<form action="" onsubmit="submitLogin();">
    				<div class="item">
    					<input type="text" class="inp" placeholder="账号" name="userName">
    				</div>
    				<div class="item">
    					<input type="password" class="inp" placeholder="密码" name="password">
    				</div>
    				<div class="item">
    					<input type="checkbox" id="chkJzmm" class="inp chk">
    					<a href="javascript:jzmm();" class="jzmm">记住密码</a>
    				</div>
    				<div class="item">
    					<input type="submit" class="inp btn" value="登录"/>
    				</div>
    			</form>
    		</div>
    	</div>
    
    </div>
    
  </body>
</html>
<script type="text/javascript">
		function submitLogin(){
			var userName = document.getElementsByName("userName")[0].value;
			var password = document.getElementsByName("password")[0].value;
			alert('userName:'+userName+'\npassword:'+password);
			return false;
		}
		
		function jzmm(){
			if(document.getElementById('chkJzmm').checked){
				document.getElementById('chkJzmm').checked = false;
			}else{
				document.getElementById('chkJzmm').checked = true;
			}
		}
		
		function resize(){
			var boxHeight = document.getElementById('BOX').offsetHeight;
			var loginBoxHeight = document.getElementById('loginBox').offsetHeight;
			var marginTop = (boxHeight-loginBoxHeight)/2;
			if(marginTop>0){
				document.getElementById('loginBox').style.marginTop = marginTop+'px';
			}
		}
		resize();
	</script>
